<template>
	<view v-if="info" class="wrap1">
		<!-- <image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode=""></image> -->

		<view class="tit">
			{{info.title}} 每天可发1次
		</view>
		<view class="code">
			任务编号 {{info.job_code}}
		</view>
		<view class="img">

			<u-upload height="360" width="225" :deletable="false" :max-count="fileList.length" :show-progress="false"
				:file-list="fileList"></u-upload>
			<!-- <image src="../../../static/aidex/img/1.png" mode=""></image> -->
		</view>

		<view class="handle">
			<view class="left">
				步骤一:保存素材到相册
			</view>
			<view class="btns">

				<u-tag @click="saveImg(fileList)" class="u-m-b-20" shape="circle" text="一键保存" mode="dark" />

			</view>
		</view>
		<view class="handle">
			<view class="left">
				步骤二:复制文案
			</view>
			<view class="">

				<u-tag @click="copyText(info.text)" class="u-m-b-20" shape="circle" text="一键复制" mode="dark" />

			</view>
		</view>
		<view class="title">
			<view class="line">

			</view>
			文案内容
		</view>
		<view class="textareas">
			<u-parse :html="info.text"></u-parse>
			<!-- (富文本内容)素人笔记和达人笔记是小红书推广最常见的形式，素人笔记通过小众用户体验+推荐的推广模式进行小规模的产品推广;达人笔记以质+量的推广模式，能够迅速引发受众的消费冲动，对品牌知名度扩大和形象树立有重要影响。所以，要想让小红书推广起到较好的宣传效果，素人笔记发布+达人笔记推广缺一不可，而伯乐网络传媒拥有高质量的素人号，素人发布后点赞、评论等真实数据有保证。小红书红人大号、达人KOL也是在小红书上面拥有较高粉丝量的用户，他们一般专注与某一个领域或者行业，可以针对品牌/产品挑选相对应的红人KOL。 -->
		</view>
		<view class="u-m-t-80">
			<u-button shape="circle" type="primary" @click="submit">提交任务</u-button>
		</view>

	</view>

</template>
<script>
	export default {

		data() {
			return {
				info:null,
				curid:'',
				fileList: [
				// 	{
				// 	url: '../../../static/aidex/img/1.png',
				// }, {
				// 	url: '../../../static/aidex/img/2.png',
				// }, {
				// 	url: '../../../static/aidex/img/3.png',
				// }, {
				// 	url: '../../../static/aidex/img/4.png',
				// },
				]
			};
		},
		onLoad(e) {
			this.curid =  e.id

			this.$u.api.generateJobTask({
					jobId: e.id,
				})
				.then((res) => {
					this.info  =res.task
					this.fileList = res.task?.materialList?.map(r=>{
						return{
							...r,
							url:r.material_url
						}
					})
				});
		},

		methods: {
			 downloadSingleImage(url) {
			  return new Promise((resolve, reject) => {
			    uni.downloadFile({
			      url: url,
			      success: (res) =>{
			        if (res.statusCode === 200) {
			          resolve(res.tempFilePath)
			        } else {
			          reject(new Error('下载失败'))
			        }
			      },
			      fail: (err) => {
			        reject(new Error('下载失败'))
			      }
			    })
			  })
			},
			
			 downloadMultipleImages(urls) {
			  let tasks = []
			  urls.forEach((url) => {
			    tasks.push(this.downloadSingleImage(url))
			  })
			  return Promise.all(tasks)
			},
			
			
			saveImg(fileList){
				let urls = fileList?.map(r=>r.url)
				
				this.downloadMultipleImages(urls).then((imagePaths) => {
				  console.log(imagePaths)
				uni.showToast({ //提示
					title: '保存成功',
					icon: "none"
				})
				}).catch((err) => {
				  console.error(err)
				})
				
			},
			copyText(value){
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},

			submit() {
				uni.navigateTo({
					url: "/pages/sys/home/sub?id="+this.curid
				})

			}
		}
	};
</script>
<style lang="scss" scoped>
	.wrap1 {
		padding: 0 32rpx 50rpx;
	}

	/deep/ .u-list-item {
		margin-left: 0 !important;
	}

	.handle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Light, PingFang SC;
		color: #333;
		line-height: 28rpx;
		margin-top: 5rpx;
		margin: 20rpx 0;
	}

	.img {
		margin: 0 -5px;

		image {
			width: 217rpx;
			height: 317rpx;
			margin-right: 10rpx;
		}
	}

	.code {
		font-size: 24rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #666666;
		line-height: 28rpx;
		margin-top: 5rpx;
		margin-bottom: 20rpx;
	}

	.title {
		margin: 30rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		line-height: 32rpx;
		display: flex;
		align-items: center;

		.line {
			width: 8rpx;
			height: 28rpx;
			margin-right: 8rpx;
			background: #3757FF;
			border-radius: 5rpx;

		}
	}

	.textareas {
		margin: 20rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 300;
		font-size: 26rpx;
		color: #666666;
		line-height: 35rpx;
		text-align: justify;
	}

	.tit {
		padding: 32rpx 0 20rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 300;
		font-size: 32rpx;
		color: #333333;
		line-height: 33rpx;
	}
</style>
